<template>
  <div class="mt-1">
    <van-form>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="startAt"
        label="开始时间"
        placeholder="请选择开始时间"
        @click="startAtVisible = true"
      />
      <van-popup v-model="startAtVisible" position="bottom">
        <van-grid direction="horizontal" :column-num="5">
          <van-grid-item text="年" />
          <van-grid-item text="月" />
          <van-grid-item text="日" />
          <van-grid-item text="时" />
          <van-grid-item text="分" />
        </van-grid>
        <van-datetime-picker
          v-model="startAtDate"
          type="datetime"
          @confirm="setStartAt"
          :max-date="endAtDate"
          title="选择日期时间"
          @cancel="startAtVisible = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="endAt"
        label="结束时间"
        placeholder="请选择结束时间"
        @click="endAtVisible = true"
      />
      <van-popup v-model="endAtVisible" position="bottom">
        <van-grid direction="horizontal" :column-num="5">
          <van-grid-item text="年" />
          <van-grid-item text="月" />
          <van-grid-item text="日" />
          <van-grid-item text="时" />
          <van-grid-item text="分" />
        </van-grid>
        <van-datetime-picker
          type="datetime"
          v-model="endAtDate"
          @confirm="setEndAt"
          title="选择日期时间"
          @cancel="endAtVisible = false"
        />
      </van-popup>
      <!-- 搜索框 -->
      <van-search
        v-model="keyword"
        placeholder="请输入搜索单据编号"
        label="单据编号"
        left-icon=" "
        @search="onSearch"
        @input="OnInput"
        class="search"
      />
      <ag-grid-vue
        style="width: 100%; height: 60vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="rowData"
      >
      </ag-grid-vue>

      <van-row type="flex" gutter="10" justify="center">
        <van-col span="8">
          <van-button block type="info" class="mt-1" @click="back"
            >返回</van-button
          ></van-col
        >
        <van-col span="8">
          <van-button block type="info" class="mt-1" @click="handleSubmit"
            >提交</van-button
          ></van-col
        >
      </van-row>
    </van-form>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { Grid, GridItem } from "vant";
import { workOrder } from "../api/feeding";
import { AgGridVue } from "ag-grid-vue";
import { AgGrid } from "../mixins/AgGrid";
import { dateToString, toast } from "../utils/common";
import { mapGetters } from "vuex";
export default {
  name: "ProcessOrder",
  components: { AgGridVue, [Grid.name]: Grid, [GridItem.name]: GridItem },
  mixins: [AgGrid],
  data() {
    let startAt =
      dayjs().hour() > 7 && dayjs().hour() < 19 && dayjs().minute() > 0
        ? dayjs().subtract(3, "day").hour(7).minute(0)
        : dayjs().subtract(3, "day").hour(19).minute(0);
    let endAt =
      dayjs().hour() > 7 && dayjs().hour() < 19 && dayjs().minute() > 0
        ? dayjs().add(3, "day").hour(19).minute(0)
        : dayjs().add(3, "day").hour(7).minute(0);
    return {
      startAtDate: startAt.toDate(),
      startAtVisible: false,
      endAtDate: endAt.toDate(),
      endAtVisible: false,
      columnDefs: [
        { headerName: "工单号", field: "PROCORDER", width: 95 },
        { headerName: "物料号", field: "MATERIAL", width: 95 },
        { headerName: "物料名称", field: "MATERIALDESC", width: 170 },
      ],
      result: {},
      copyNum: [], //当搜索框为空时的数据
      rowData: [],
      keyword: "",
    };
  },
  computed: {
    ...mapGetters(["productionLine"]),
    startAt() {
      return dateToString(this.startAtDate);
    },
    endAt() {
      return dateToString(this.endAtDate);
    },
  },
  methods: {
    handleSubmit() {
      let rows = this.gridApi.getSelectedRows();
      if (rows.length) {
        this.$emit("get-val", rows[0]);
      } else {
        toast("请选择工单");
        console.log(dayjs().minute());
      }
    },
    back() {
      this.$emit("back");
    },
    async getProcessOrders() {
      let res = await workOrder(
        //this.startAt.substring(0, 10),
        this.startAt,
        this.endAt,
        this.productionLine
      );
      /* let res = await workOrder(
        //this.startAt.substring(0, 10),
        this.startAt.substring(0, 10),
        this.endAt.substring(0, 10),
        ""
      ); */
      console.log(res);
      if (res && res.Status == 200) {
        this.rowData = res.Data;
        this.copyNum = res.Data;
        console.log(this.rowData);
      } else {
        toast(res.Msg);
      }
    },
    setStartAt() {
      this.startAtVisible = false;
      this.getProcessOrders();
    },
    setEndAt() {
      this.endAtVisible = false;
      this.getProcessOrders();
    },
    onSearch() {
      //搜索框功能
      let _this = this;
      this.gridApi.forEachNode(function (node) {
        if (node.data.PROCORDER == _this.keyword) {
          _this.result = node.data;
          _this.rowData = [_this.result];
        }
      });
    },
    OnInput() {
      if (this.keyword == "") {
        this.rowData = this.copyNum;
      }
    },
  },
  created() {
    this.getProcessOrders();
    /*     console.log("当前时间" + dayjs());
    //console.log(dayjs().add(1, "day").hour(7).minute(0));
    console.log("当前小时" + dayjs().hour(), "H");
    console.log("当前分钟" + dayjs().minute(), "M");
    console.log(dayjs().toString());
    console.log(dayjs().hour(7).minute(0).toString()); */
    /* console.log(
      dayjs().toString() > dayjs().hour(7).minute(0).toString(),
      "HM"
    ); */
    /*  console.log(
      dayjs().hour() > 7 && dayjs().hour() < 19 && dayjs().minute() > 0,
      "HH"
    ); */
    //console.log(dayjs().minute());
  },
  /*  destroyed() {
    console.log("order");
  }, */
};
</script>

<style scoped>
.search {
  padding-left: 0;
  padding-right: 0;
}
</style>
